<template>
  <div class='login'>
    <div class='imgbox'>
      <img src='../../assets/images/login.png' alt=''>
    </div>
    <input type='tel' class='name' placeholder='输入手机号码' v-model='phone'>
    <div class='codeBox'>
      <input type='text' class='code' placeholder='输入手机验证码' v-model='code'>
      <input type='button' v-bind:value='sms' class='btn' @click='clickCode' v-bind:disabled='disabled'>
    </div>
    <div class='btnBox'>
      <input type='button' value='确定' @click='clickSure'>
    </div>
  </div>
</template>

<script>
  import { requestCode, requestPhone, requestMe } from '../../api/api'
  export default {
    name: 'login',
    props: {
      show: false
    },
    data () {
      return {
        phone: '',
        code: '',
        disabled: false,
        sms: '获取短信验证码',
        timer: 60,
        Interval: null
      }
    },
    methods: {
      update () {
        if (this.timer <= 0) {
          clearInterval(this.Interval)
          this.timer = 60
          this.sms = '获取短信验证码'
          this.disabled = false
        } else {
          this.timer--
          this.sms = this.timer + 's后重新获取'
          this.disabled = true
        }
      },
      clickCode: function () {
        let e = this
        if (!/^[13|15|18|17]{2}[\d]{9}$/.test(e.phone)) {
          this.$swal('手机号码错误', '请填写正确的手机号码', 'error')
          return
        }
        requestCode({
          phone: e.phone
        }).then(function (res) {
          e.$swal('成功', res.message, 'success')
          e.Interval = setInterval(e.update, 1000)
        })
      },
      clickSure: function () {
        let e = this
        requestPhone({
          phone: e.phone,
          code: e.code
        }).then(function () {
          requestMe({}).then((userInfo) => {
            userInfo.phone = e.phone
            window.localStorage.setItem('user', JSON.stringify(userInfo))
          })
          e.$router.push('/sign?sponsorsId=' + e.$route.query.sponsorsId + '&spreaderId=' + e.$route.query.spreaderId)
        })
      }
    }
  }
</script>

<style scoped lang='less'>
  @in:30.5rem;
  @border:#e8e8e8;
  @font:#8e8e8e;
  @orange:#f1ae9b;
  @bdcolor:#ededed;
  .imgbox{
    width:125/2/10rem;
    height: 125/2/10rem;
    margin:65/2/10rem auto;
    img{
      width:125/2/10rem;
      height: 125/2/10rem;
      display: block;
    }
  }
  .name,.codeBox,.btnBox{
    width: @in;
    height: 4rem;
    background: @bdcolor;
    display: block;
    margin:30/2/10rem auto;
    border-radius: 0.25rem;
    overflow: hidden;
    padding:0 0.5rem;
    box-sizing: border-box;
    font-size:1.2rem;
  }
  .codeBox{
    position: relative;
    margin-bottom:40/2/10rem;
    .code{
      position: absolute;
      left:0;
      top:0;
      width: 100%;
      height: 100%;
      background: none;
      padding:0 4rem 0 0.5rem;
      box-sizing: border-box;
      font-size:1.2rem;
    }
    .btn{
      width: 200/2/10rem;
      height: 4rem;
      background: @orange;
      position: absolute;
      right:0;
      top:0;
      color: #fff;
      border-radius: 0.25rem;
      font-size:1.2rem;
    }
  }
  .btnBox{
    background: @orange;
    input{
      width: 100%;
      height: 100%;
      background: none;
      color: #fff;
      font-size:1.2rem;
    }
  }
</style>
